<template>
  <v-container class="personal-center">
    <!-- 顶部导航栏 -->
    <v-app-bar color="primary" dark>
      <v-btn icon @click="goBack">
        <v-icon>mdi-arrow-left</v-icon>
      </v-btn>
      <v-toolbar-title>个人中心</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon @click="editProfile">
        <v-icon>mdi-pencil</v-icon>
      </v-btn>
    </v-app-bar>

    <!-- 用户基本信息卡片 -->
    <v-card class="mx-auto mt-6 profile-card" max-width="600" elevation="3">
      <v-card-text class="text-center">
        <!-- 头像 -->
        <v-avatar size="100" color="grey lighten-2" class="mb-4">
          <v-img v-if="user.avatar" :src="user.avatar"></v-img>
          <v-icon v-else size="60">mdi-account-circle</v-icon>
        </v-avatar>

        <!-- 姓名 -->
        <div class="text-h5 font-weight-bold">{{ user.name }}</div>

        <!-- 账户 -->
        <div class="text-subtitle-1 grey--text">{{ user.account }}</div>
      </v-card-text>

      <v-divider></v-divider>

      <!-- 基本信息 -->
      <v-list>
        <v-list-item>
          <v-list-item-icon>
            <v-icon>mdi-phone</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>电话</v-list-item-title>
            <v-list-item-subtitle>{{ user.phone }}</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>

        <v-list-item>
          <v-list-item-icon>
            <v-icon>mdi-school</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>学号</v-list-item-title>
            <v-list-item-subtitle>{{ user.studentId }}</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>

        <v-list-item>
          <v-list-item-icon>
            <v-icon>mdi-book</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>专业班级</v-list-item-title>
            <v-list-item-subtitle>{{ user.majorClass }}</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-card>

    <!-- 详细信息 -->
    <v-card class="mx-auto mt-4" max-width="600" elevation="3">
      <v-list>
        <v-list-item>
          <v-list-item-icon>
            <v-icon>mdi-human-male-height</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>身高（cm）</v-list-item-title>
            <v-list-item-subtitle>{{ user.height }}</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>

        <v-list-item>
          <v-list-item-icon>
            <v-icon>mdi-weight-kilogram</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>体重（kg）</v-list-item-title>
            <v-list-item-subtitle>{{ user.weight }}</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-card>

    <!-- 操作按钮 -->
    <v-card class="mx-auto mt-4" max-width="600" elevation="3">
      <v-card-actions>
        <!-- 修改密码 -->
        <v-btn block color="primary" @click="openPasswordDialog">
          <v-icon left>mdi-lock-reset</v-icon> 修改密码
        </v-btn>
      </v-card-actions>
    </v-card>

    <!-- 修改密码对话框 -->
    <v-dialog v-model="passwordDialog" max-width="500">
      <v-card>
        <v-card-title class="primary white--text">
          修改密码
        </v-card-title>

        <v-card-text class="mt-4">
          <v-form ref="passwordForm" v-model="isFormValid">
            <!-- 当前密码 -->
            <v-text-field
              v-model="currentPassword"
              label="当前密码"
              type="password"
              :rules="passwordRules"
              required
            ></v-text-field>

            <!-- 新密码 -->
            <v-text-field
              v-model="newPassword"
              label="新密码"
              type="password"
              :rules="passwordRules"
              required
            ></v-text-field>

            <!-- 确认新密码 -->
            <v-text-field
              v-model="confirmPassword"
              label="确认新密码"
              type="password"
              :rules="confirmPasswordRules"
              required
            ></v-text-field>
          </v-form>
        </v-card-text>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="grey" text @click="closePasswordDialog">
            取消
          </v-btn>
          <v-btn color="primary" :disabled="!isFormValid" @click="submitPasswordChange">
            确定
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-container>
</template>

<script setup>
import { ref } from "vue";

// 用户数据
const user = {
  avatar: "", // 如果没有头像，可以设置为空字符串
  name: "张三",
  account: "user123",
  phone: "123-4567-8901",
  studentId: "20231001",
  majorClass: "计算机科学与技术 1班",
  height: "175",
  weight: "70",
};

// 修改密码对话框状态
const passwordDialog = ref(false);

// 表单验证相关
const isFormValid = ref(false);
const currentPassword = ref("");
const newPassword = ref("");
const confirmPassword = ref("");

// 密码验证规则
const passwordRules = [
  (v) => !!v || "密码不能为空",
  (v) => (v && v.length >= 6) || "密码长度不能少于6个字符",
];

const confirmPasswordRules = [
  (v) => !!v || "请确认新密码",
  (v) => v === newPassword.value || "两次输入的密码不一致",
];

// 打开修改密码对话框
const openPasswordDialog = () => {
  passwordDialog.value = true;
};

// 关闭修改密码对话框
const closePasswordDialog = () => {
  passwordDialog.value = false;
  currentPassword.value = "";
  newPassword.value = "";
  confirmPassword.value = "";
};

// 提交修改密码
const submitPasswordChange = () => {
  if (isFormValid.value) {
    console.log("当前密码：", currentPassword.value);
    console.log("新密码：", newPassword.value);
    alert("密码修改成功！");
    closePasswordDialog();
  }
};

// 返回上一页
const goBack = () => {
  console.log("返回上一页");
};

// 编辑资料
const editProfile = () => {
  console.log("跳转到编辑资料页面");
};
</script>

<style scoped>
.personal-center {
  padding-top: 56px; /* 为顶部导航栏留出空间 */
}

.profile-card {
  border-radius: 15px;
}
</style>
